/* -------------------------------- 

#haru-hp-typing

-------------------------------- */

.haru-typing-container {
    font-weight: 600;
    min-height: 2.5em;
    font-size: 55px;
    min-width: 485px;
}

@media only screen and (max-width: 1190px) {
    .haru-typing-container {
        font-weight: 600;
        min-height: 2.5em;
        font-size: 30px;
        min-width: 330px;
    }
}

@media only screen and (max-width: 484px) {
    .haru-typing-container {
        font-weight: 600;
        min-height: 2.5em;
        font-size: 36px;
        min-width: 330px;
    }
}

.haru-typing-text {
    display: inline-block;
}

.haru-typing-cursor {
    position: relative;
    bottom: .1em;
    right: .2em;
    display: inline-block;
    vertical-align: middle;
    padding: .7em 0;
    width: 1px;
    background-color: #232323;
    animation: haru-typing-blink 1s step-end infinite;
}

@keyframes haru-typing-blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: #232323;
    }
}

#haru-hp-typing {
    font-weight: 600;
    font-size: 55px;
}

#haru-hp-typing .haru-typing-before {
    background: linear-gradient(-60deg, #f99d1c, #f99c1c 10%, #f4781f 30%, #f16221 43%, #f05a22 58%, #ee1d62 76%, #ed0080 97%);
    line-height: 1.5em;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%, 100%;
    display: inline-block;
}


/* -------------------------------- 
    
    #haru-hp-bannerbox
    
    -------------------------------- */

#haru-hp-bannerbox {
    background-image: url('https://www.nsecsoft.com/wp-content/uploads/2021/02/haru-banner102.svg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	background-color: #f8f9fb;
    color: #444;
    font-size: 20px;
	box-shadow: 10px 10px 20px 0px rgb(0 0 0 / 5%), -10px 0 20px 0px rgb(0 0 0 / 5%);
}
#haru-hp-bannerbox .haru-hp-bannerbox-recovered {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: auto;
}

#haru-hp-bannerbox .haru-hp-bannerbox-container {
    padding: 40px 55px;
    background: transparent;
    background-image: url('https://www.nsecsoft.com/wp-content/uploads/2021/02/haru-banner103-1.svg');
    background-repeat: no-repeat;
    background-position: 70% 80%;
	background-size: 80%;
}

@media only screen and (max-width: 767px){
	#haru-hp-bannerbox .haru-hp-bannerbox-container {
	    background-position: 110% 90%;
	    background-size: 150%;
	}
}
#haru-hp-bannerbox .haru-hp-bannerbox-container:after {
    content: "";
    display: block;
    clear: both;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #0575E6,#01d77d);
    position: absolute;
    left: 0;
    bottom: -6px;
}
#haru-hp-bannerbox a.haru-hp-bannerbox-button {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin-top: 1em;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.33s ease;
}

#haru-hp-bannerbox a.haru-hp-bannerbox-button:hover {
    color: rgba(255, 255, 255, .5);
}

#haru-hp-bannerbox h2{
	color: inherit;
}

/* -------------------------------- 

.haru-easyslider
#haru-hp-banner-easy-slider

-------------------------------- */

.haru-easyslider img {
    max-width: 100%;
    display: block;
}

.haru-easyslider .haru-easyslider-container {
    position: relative;
}

.haru-easyslider-container ::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}

.haru-easyslider .haru-easyslider-item {
    opacity: 0;
    position: absolute;
    display: block;
    /* transition: all .5s; */
}

#haru-hp-banner-easy-slider .haru-easyslider-bg img{
	background-color:#edf2f9;
	border-color:#edf2f9;
	border-radius: 8px;
		box-shadow: 10px 10px 20px 0px rgb(0 0 0 / 10%), -10px 0 20px 0px rgb(0 0 0 / 10%);
}

/* ********************
 * 
 * 首页中间背景  #haru-homepage-center-bg
 * 
 * ******************** */
 #haru-homepage-center-bg .haru-hp-right-bg,
 #haru-homepage-center-bg .haru-hp-right-bg-2,
 #haru-homepage-center-bg .haru-hp-left-bg,
 #haru-homepage-center-bg .haru-hp-left-bg-2{
     position: absolute;
 }
 
/*  right  */
 #haru-homepage-center-bg .haru-hp-right-bg,
 #haru-homepage-center-bg .haru-hp-right-bg-2 {
     height: 484.45px;
         width: 2498.9px;
     top: 220px;
     opacity: .3;
     transform: matrix(.71, -.65, .77, .71, 0, 0);
 }
 
 #haru-homepage-center-bg .haru-hp-right-bg {
     left: 25%;
     background: linear-gradient(98.36deg, #d5dce5 43.6%, rgba(213, 220, 229, 0) 75.05%);
 }
 
 #haru-homepage-center-bg .haru-hp-right-bg-2 {
     left: 35%;
     background: linear-gradient(106.86deg, #d5dce5 47.59%, rgba(213, 220, 229, 0) 82.07%);
 }

/*  left  */
 #haru-homepage-center-bg .haru-hp-left-bg,
 #haru-homepage-center-bg .haru-hp-left-bg-2 {
     height: 700px;
         width: 700px;
     background-image: url('https://www.nsecsoft.com/wp-content/uploads/2021/02/haru-banner104.svg');
     background-repeat: no-repeat;
background-size: cover;
	 opacity:1;
 }

 #haru-homepage-center-bg .haru-hp-left-bg {
	      top: 400px;
 }
 
 #haru-homepage-center-bg .haru-hp-left-bg-2 {
	      top: 1000px;
 }

@media (min-width: 1650px) {
 #haru-homepage-center-bg .haru-hp-left-bg  {
        left: 105%;
    }
 #haru-homepage-center-bg .haru-hp-left-bg-2 {
        right: 105%;
    }
}

@media (max-width: 1649px) {

    #haru-homepage-center-bg .haru-hp-right-bg {
        top: 10%;
    }
	    #haru-homepage-center-bg .haru-hp-right-bg-2 {
        top: 0%;
    }
	 #haru-homepage-center-bg .haru-hp-left-bg  {
		 	 top:15%;
/*         left: 750px; */        
		 left: 80%;
    }
 #haru-homepage-center-bg .haru-hp-left-bg-2 {
	 top:60%;
/*         right: 750px; */
	 right: 90%;
    }
}